<template>
  <a-button class="editable-add-btn" @click="handleAdd" style="margin-bottom: 8px">新增</a-button>
  <a-table bordered :columns="columns" :dataSource="data" class="components-table-demo-nested">
    <template v-for="col in ['bdmc','dwgc','state','wgtime','yspdwgzl','yspd','hbwgzl','hb']" #[col]="{ text, record }" :key="col">
      <div>
        <template  v-if="editableData[record.key]&&['yspdwgzl','yspd','hbwgzl','hb'].includes(col)">
          <a-select
            ref="select"
            v-model:value="editableData[record.key][col]"
            style="width: 120px"
            @focus="focus"
            @change="handleChange"
          >
            <a-select-option value="是">是</a-select-option>
            <a-select-option value="否">否</a-select-option>
          </a-select>
        </template>
        <template  v-else-if="editableData[record.key]">
          <a-input
            v-model:value="editableData[record.key][col]"
            style="margin: -5px 0"
          />
        </template>
        <template v-else>
          {{ text }}
        </template>
      </div>
    </template>

    <template #operation="{ record }">
      <div class="editable-row-operations">
        <span v-if="editableData[record.key]">
          <a @click="save(record.key)">保存</a>
          <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
            <a>取消</a>
          </a-popconfirm>
        </span>
        <span v-else>
          <a @click="edit(record.key)">编辑</a>
        </span>
      </div>
      <a-popconfirm
        v-if="data.length"
        title="是否确认删除该数据?"
        @confirm="onDelete(record.key)"
      >
        <a>删除</a>
      </a-popconfirm>
    </template>
    <template #expandedRowRender>
      <template >
        <a-button class="editable-add-btn" @click="handleAdd_fb" style="margin-bottom: 18px">新增</a-button>
        <a-table bordered :columns="innerColumns" :dataSource="innerData" :pagination="false">
          <template v-for="col in ['fbgc','state','wgtime','yspdwgzl','yspd','hbwgzl','hb']" #[col]="{ text, record }" :key="col">
            <div>
              <template  v-if="editableData_fb[record.key]&&['yspdwgzl','yspd','hbwgzl','hb'].includes(col)">
                <a-select
                  ref="select"
                  v-model:value="editableData_fb[record.key][col]"
                  style="width: 120px"
                  @focus="focus"
                  @change="handleChange"
                >
                  <a-select-option value="是">是</a-select-option>
                  <a-select-option value="否">否</a-select-option>
                </a-select>
              </template>
              <template  v-else-if="editableData_fb[record.key]">
                <a-input
                  v-model:value="editableData_fb[record.key][col]"
                  style="margin: -5px 0"
                />
              </template>
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>

          <template #operation="{ record }">
            <div class="editable-row-operations">
        <span v-if="editableData_fb[record.key]">
          <a @click="save_fb(record.key)">保存</a>
          <a-popconfirm title="Sure to cancel?" @confirm="cancel_fb(record.key)">
            <a>取消</a>
          </a-popconfirm>
        </span>
              <span v-else>
          <a @click="edit_fb(record.key)">编辑</a>
        </span>
            </div>
            <a-popconfirm
              v-if="innerData.length"
              title="是否确认删除该数据?"
              @confirm="onDelete_fb(record.key)"
            >
              <a>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
      </template>
      <template>
        <a-button class="editable-add-btn" @click="handleAdd_dy" style="margin-bottom: 18px">新增</a-button>
        <a-table bordered :columns="danyuanColumns" :dataSource="danyuanData" :pagination="false">
          <template v-for="col in ['dygc','state','wgtime','yspdwgzl','yspd','hbwgzl','hb']" #[col]="{ text, record }" :key="col">
            <div>
              <template  v-if="editableData_dy[record.key]&&['yspdwgzl','yspd','hbwgzl','hb'].includes(col)">
                <a-select
                  ref="select"
                  v-model:value="editableData_dy[record.key][col]"
                  style="width: 120px"
                  @focus="focus"
                  @change="handleChange"
                >
                  <a-select-option value="是">是</a-select-option>
                  <a-select-option value="否">否</a-select-option>
                </a-select>
              </template>
              <template  v-else-if="editableData_dy[record.key]">
                <a-input
                  v-model:value="editableData_dy[record.key][col]"
                  style="margin: -5px 0"
                />
              </template>
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>

          <template #operation="{ record }">
            <div class="editable-row-operations">
                <span v-if="editableData_dy[record.key]">
                  <a @click="save_dy(record.key)">保存</a>
                  <a-popconfirm title="Sure to cancel?" @confirm="cancel_dy(record.key)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
              <span v-else>
                  <a @click="edit_dy(record.key)">编辑</a>
                </span>
            </div>
            <a-popconfirm
              v-if="danyuanData.length"
              title="是否确认删除该数据?"
              @confirm="onDelete_dy(record.key)"
            >
              <a>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
      </template>
    </template>
  </a-table>
</template>
<script>
import { DownOutlined } from '@ant-design/icons-vue';
import { computed, defineComponent, reactive, ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '标段名称',
    dataIndex: 'bdmc',
    key: 'bdmc',
    slots: {
      customRender: 'bdmc',
    },
  },
  {
    title: '单位工程',
    dataIndex: 'dwgc',
    key: 'dwgc',
    slots: {
      customRender: 'dwgc',
    },
  },
  {
    title: '完工状态',
    dataIndex: 'state',
    key: 'state',
    slots: {
      customRender: 'state',
    },
  },
  {
    title: '完工时间',
    dataIndex: 'wgtime',
    key: 'wgtime',
    slots: {
      customRender: 'wgtime',
    },
  },
  {
    title: '单位工程',
    dataIndex: 'dwgc',
    key: 'dwgc',
    slots: {
      customRender: 'dwgc',
    },
  },
  {
    title: '是否验收评定该单位工程外观质量',
    dataIndex: 'yspdwgzl',
    key: 'yspdwgzl',
    slots: {
      customRender: 'yspdwgzl',
    },
  },
  {
    title: '是否验收评定该单位工程',
    dataIndex: 'yspd',
    key: 'yspd',
    slots: {
      customRender: 'yspd',
    },
  },
  {
    title: '是否核备该单位工程外观质量',
    dataIndex: 'hbwgzl',
    key: 'hbwgzl',
    slots: {
      customRender: 'hbwgzl',
    },
  },
  {
    title: '是否核备该单位工程',
    dataIndex: 'hb',
    key: 'hb',
    slots: {
      customRender: 'hb',
    },
  },
  {
    title: '操作',
    key: 'operation',
    slots: {
      customRender: 'operation',
    },
  },
];
const data = ref([]);
for (let i = 1; i < 3; ++i) {
  data.value.push({
    key:i,
    index: i,
    bdmc: '广西贵港市港南区武思江水库除险加固工程'+i,
    dwgc: '单位工程'+i,
    state: '在建',
    wgtime: '',
    yspdwgzl: '是',
    yspd: '是',
    hbwgzl: '是',
    hb: '是',
  });
}
const innerColumns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '分部工程',
    dataIndex: 'fbgc',
    key: 'fbgc',
    slots: {
      customRender: 'fbgc',
    },
  },
  {
    title: '完工状态',
    key: 'state',
    dataIndex: 'state',
    slots: {
      customRender: 'state',
    },
  },
  {
    title: '完工时间',
    dataIndex: 'wgtime',
    key: 'wgtime',
    slots: {
      customRender: 'wgtime',
    },
  },
  {
    title: '是否验收评定该分部工程外观质量',
    dataIndex: 'yspdwgzl',
    key: 'yspdwgzl',
    slots: {
      customRender: 'yspdwgzl',
    },
  },
  {
    title: '是否验收评定该分部工程',
    dataIndex: 'yspd',
    key: 'yspd',
    slots: {
      customRender: 'yspd',
    },
  },
  {
    title: '是否核备该分部工程外观质量',
    dataIndex: 'hbwgzl',
    key: 'hbwgzl',
    slots: {
      customRender: 'hbwgzl',
    },
  },
  {
    title: '是否核备该分部工程',
    dataIndex: 'hb',
    key: 'hb',
    slots: {
      customRender: 'hb',
    },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    slots: {
      customRender: 'operation',
    },
  },
];
const innerData = ref([]);
for (let i = 1; i < 3; ++i) {
  innerData.value.push({
    key:i,
    index: i,
    fbgc: '分布工程'+i,
    state: '在建',
    wgtime: '',
    yspdwgzl: '是',
    yspd: '是',
    hbwgzl: '是',
    hb: '是',
  });
}
const danyuanColumns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '单元工程',
    dataIndex: 'dygc',
    key: 'dygc',
    slots: {
      customRender: 'dygc',
    },
  },
  {
    title: '完工状态',
    key: 'state',
    dataIndex: 'state',
    slots: {
      customRender: 'state',
    },
  },
  {
    title: '完工时间',
    dataIndex: 'wgtime',
    key: 'wgtime',
    slots: {
      customRender: 'wgtime',
    },
  },
  {
    title: '是否验收评定该分部工程外观质量',
    dataIndex: 'yspdwgzl',
    key: 'yspdwgzl',
    slots: {
      customRender: 'yspdwgzl',
    },
  },
  {
    title: '是否验收评定该分部工程',
    dataIndex: 'yspd',
    key: 'yspd',
    slots: {
      customRender: 'yspd',
    },
  },
  {
    title: '是否核备该分部工程外观质量',
    dataIndex: 'hbwgzl',
    key: 'hbwgzl',
    slots: {
      customRender: 'hbwgzl',
    },
  },
  {
    title: '是否核备该分部工程',
    dataIndex: 'hb',
    key: 'hb',
    slots: {
      customRender: 'hb',
    },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    slots: {
      customRender: 'operation',
    },
  },
];
const danyuanData = ref([]);
for (let i = 1; i < 3; ++i) {
  danyuanData.value.push({
    key:i,
    index: i,
    dygc: '单元工程'+i,
    state: '已完工',
    wgtime: '2023-06-01',
    yspdwgzl: '是',
    yspd: '是',
    hbwgzl: '是',
    hb: '是',
  });
}

const count = computed(() => data.value.length + 1);
const editableData = reactive({});
const edit = key => {
  editableData[key] = cloneDeep(data.value.filter(item => key === item.key)[0]);
};
const save = key => {
  Object.assign(data.value.filter(item => key === item.key)[0], editableData[key]);
  delete editableData[key];
};
const onDelete = key => {
  data.value = data.value.filter(item => item.key !== key);
};
const handleAdd = () => {
  const newData = {
    key: 3,
    index: 3,
    bdmc: '标段'+`${count.value}`,
    dwgc: '单位工程'+`${count.value}`,
    state: '在建',
    wgtime: '',
    yspdwgzl: '是',
    yspd: '是',
    hbwgzl: '是',
    hb: '是',
  };
  data.value.push(newData);
};
const cancel = key => {
  delete editableData[key];
};
const count_fb = computed(() => innerData.value.length + 1);
const editableData_fb = reactive({});
const edit_fb = key => {
  editableData_fb[key] = cloneDeep(innerData.value.filter(item => key === item.key)[0]);
};
const save_fb = key => {
  Object.assign(innerData.value.filter(item => key === item.key)[0], editableData_fb[key]);
  delete editableData_fb[key];
};
const onDelete_fb = key => {
  innerData.value = innerData.value.filter(item => item.key !== key);
};
const handleAdd_fb = () => {
  const newData = {
    key:count_fb,
    index: count_fb,
    fbgc: '分布工程'+`${count_fb.value}`,
    state: '在建',
    wgtime: '',
    yspdwgzl: '是',
    yspd: '是',
    hbwgzl: '是',
    hb: '是',
  };
  innerData.value.push(newData);
};
const cancel_fb = key => {
  delete editableData_fb[key];
};
const count_dy = computed(() => innerData.value.length + 1);
const editableData_dy = reactive({});
const edit_dy = key => {
  editableData_dy[key] = cloneDeep(danyuanData.value.filter(item => key === item.key)[0]);
};
const save_dy = key => {
  Object.assign(danyuanData.value.filter(item => key === item.key)[0], editableData_dy[key]);
  delete editableData_dy[key];
};
const onDelete_dy = key => {
  danyuanData.value = danyuanData.value.filter(item => item.key !== key);
};
const handleAdd_dy = () => {
  const newData = {
    key:count_dy,
    index: count_dy,
    dygc: '分布工程'+`${count_dy.value}`,
    state: '在建',
    wgtime: '',
    yspdwgzl: '是',
    yspd: '是',
    hbwgzl: '是',
    hb: '是',
  };
  danyuanData.value.push(newData);
};
const cancel_dy = key => {
  delete editableData_dy[key];
};

const innerDatas=ref([]);
innerDatas.value.push(innerData);
export default defineComponent({
  // components: {
  //   DownOutlined,
  //   CheckOutlined,
  //   EditOutlined,
  // },
  setup() {
    return {
      data,
      columns,
      innerColumns,
      innerData,
      danyuanColumns,
      danyuanData,
      onDelete,
      handleAdd,
      editableData,
      count,
      edit,
      save,
      cancel,
      onDelete_fb,
      handleAdd_fb,
      editableData_fb,
      count_fb,
      edit_fb,
      save_fb,
      cancel_fb,
      onDelete_dy,
      handleAdd_dy,
      editableData_dy,
      count_dy,
      edit_dy,
      save_dy,
      cancel_dy,
    };
  },
});
</script>
<style lang="less">
  .editable-cell {
    position: relative;
    .editable-cell-input-wrapper,
    .editable-cell-text-wrapper {
      padding-right: 24px;
    }

    .editable-cell-text-wrapper {
      padding: 5px 24px 5px 5px;
    }

    .editable-cell-icon,
    .editable-cell-icon-check {
      position: absolute;
      right: 0;
      width: 20px;
      cursor: pointer;
    }

    .editable-cell-icon {
      margin-top: 4px;
      display: none;
    }

    .editable-cell-icon-check {
      line-height: 28px;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
      color: #108ee9;
    }

    .editable-add-btn {
      margin-bottom: 8px;
    }
  }
  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }
  .editable-row-operations a {
    margin-right: 8px;
  }
</style>
